<template>
    <el-select clearable placeholder="请选择省份" v-model="province">
        <!-- label是显示的值，value是绑定给el-select中的v-model值  -->
        <el-option v-for="(item) in allArea" :key="item.code" :label="item.name" :value="item.code"></el-option>
    </el-select>
    <el-select clearable :disabled="!province" placeholder="请选择城市" v-model="city">
        <el-option v-for="(item) in chooseCity" :key="item.code" :label="item.name" :value="item.code"></el-option>
    </el-select>
    <el-select clearable :disabled="!province || !city" placeholder="请选择区域" v-model="area">
        <el-option v-for="(item) in chooseArea" :key="item.code" :label="item.name" :value="item.code"></el-option>
    </el-select>
    <el-cascader v-model="value" :options="options" @change="handleChange" />
</template>
<script lang="ts" setup>
import { Interface } from 'readline';
import dataJson from '../lib/pca-code.json'
import { ref, computed, watch } from "vue"
export interface AreaItem {
    code: string;
    name: string;
    children?: AreaItem[]
}


const emit = defineEmits(['change'])
const province = ref<string>('')
const city = ref<string>('')
const area = ref<string>('')
const allArea = ref(dataJson)
let chooseCity = ref<AreaItem[]>([])
let chooseArea = ref<AreaItem[]>([])
watch(() => province.value, (val) => {
    if (val) {
        chooseCity.value = allArea.value.find(item => item.code === val)!.children
    }
    city.value = ""
    area.value = ""


})
watch(() => city.value, (val) => {
    if (val) {
        chooseArea.value = chooseCity.value.find(item => item.code === val)!.children!
    }
    area.value = ""

})
// const chooseCity = computed(() => {
//     if (!province) return []
//     city.value = ""
//     area.value = ""
//     return allArea.value.find(item => item.code == province.value)?.children   
// })
// const chooseArea = computed(() => {
//     if (!city) return []
//     area.value = ""
//     return chooseCity.value?.find(item => item.code == city.value)?.children
// })
watch(() => area.value, (val) => {
    if (val) {
        let provinceData = {
            code: province.value,
            name: province.value && allArea.value.find(item => item.code === province.value)?.name
        }
        let cityData = {
            code: city.value,
            name: city.value && chooseCity.value.find(item => item.code === city.value)!.name
        }
        let areaData = {
            code: area.value,
            name: area.value && chooseArea.value.find(item => item.code === area.value)!.name
        }
        emit('change', {
            province: provinceData,
            city: cityData,
            area: areaData
        })
    }
})

const value=ref("")
const parseData=(obj)=>{
    obj.forEach(item=>{
        item.value=item['code']
        item.label=item['name']
        item.children=item['children']
        if(item['children']&&item['children'].length>0){
            parseData(item['children'])
        }
    })
    return obj
}
const options=ref(parseData(dataJson))

const handleChange=(val)=>{
    for(let key in val){
       // console.log(options.value.find(item=>item.code==val[key]))
        //根据code找name
    }
}
</script>
<style lang="scss"></style>
